// 设备地区统计 饼图
<template>
    <div class="driver-charts-online item-container" id="DeviceOnlineTrendStatistic"></div>
</template>

<script>
//引入引入echarts基本模板
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
    export default {
        name:'DeviceOnlineTrendStatistic',
        data () {
            return {
                chartX : ['-', '-', '-', '-', '-', '-', '-'],
                chartY : [10, 10, 10, 10, 10, 10, 10]
            }
        },
        mounted: function() {
            this.drawPieOnline();
        },
        methods: {
            drawPieOnline() {
                var DeviceOnlineTrendStatisticChart = this.$echarts.init(document.getElementById("DeviceOnlineTrendStatistic"));
                var Option = null;
                Option = {
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        top:'5%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: false, readOnly: false},
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.chartX,
                        axisLabel: {
                            show: true,
                            textStyle: {
                            color: '#18cdf2'   //这里用参数代替了
                            }
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#011011',
                                width:1,//这里是为了突出显示加上的
                            }
                        }

                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                            color: '#18cdf2'   //这里用参数代替了
                            }
                        },
                        splitLine:{show: false},
                        axisLine:{
                            lineStyle:{
                                color:'#011011',
                                width:1,//这里是为了突出显示加上的
                            }
                        }
                    },
                    series: [{
                        data: this.chartY,
                        smooth: true,
                        tooltip: {
                            show: false,
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'top',
                                textStyle: {
                                    color: 'white'
                                }
                            }
                        },
                        type: 'line',
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 1, 0, 0,
                                    [
                                        {offset: 1, color: '#18cdf2'},
                                        {offset: 0.2, color: '#01232e'},
                                        {offset: 0, color: '#030e14'}
                                    ]
                                )
                            }
                        },
                        lineStyle:{
                            normal:{
                                color: "#19ccf2",
                                width:2,
                                lineStyle: {
                                    color: "#2ec7c9"
                                }
                            }
                        },
                        //隐藏圆点
                        symbol: "none",
                        itemStyle: {
                            normal: {
                                show:false,
                                color: "#2ec7c9",
                                lineStyle: {
                                    color: "#FFFFFF"
                                }
                            }
                        }
                    }]
                };
                //数据请求
                const userInfo = JSON.parse(localStorage.getItem("userInfo"));
                $.ajax({
                    url: this.global.DeviceOnlineWeekTrend + "?appKey=" + userInfo.appKey,  //接口地址，配置在全局 golbal.vue文件
                    dataType: "json",
                    type: "GET",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    success: function(res) {
                        if(res.success == true && res.code == 200){
                            Option.xAxis.data = res.data.statDateList.reverse();
                            Option.series[0].data = res.data.onlineCountList.reverse();
                            DeviceOnlineTrendStatisticChart.setOption(Option, true);
                        }
                        else{
                            console.log("获取图表信息失败");
                        }
                    },
                    complete: function(res) {
                        console.log("完成");
                    },
                    error: function(res) {
                        console.log("获取图标信息失败");
                    }
                });


                // if (DeviceOnlineTrendStatisticOption && typeof DeviceOnlineTrendStatisticOption === "object") {
                //     DeviceOnlineTrendStatisticChart.setOption(DeviceOnlineTrendStatisticOption, true);
                // }
            }
        },
    }
</script>

<style scoped>

</style>